<!DOCTYPE html>
<html>
<head>
    <include file="Public/head"/>

    <!--<script type="text/javascript" src="__DATA__/static/js/common.js"></script>-->


    <script type="text/javascript" src="__JS__/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
        // 筛选商品属性
        jQuery(function($) {
            $(".info").click(function(){
                $('.goodsBuy .fields').slideToggle("fast");
            });
        });
    </script>
    <style>
        div.conte{
            padding: 10px 1.5rem;
        }
        div.attr{
            padding: 10px 1.5rem; line-height: 30px;
        }
    </style>
</head>
<body>
<header id="header">
    <div class="header_l header_return"> <a class="ico_10" href="javascript:history.go(-1);"> 返回 </a> </div>
    <h1> 商品详情 </h1>
    <!--<div class="header_r header_search"> <a class="ico_15" href="#"> 分享 </a> </div>-->
</header>

<script src="__JS__/TouchSlide.js"></script>
<section class="goods_slider">
    <div class="blank2"></div>
    <div id="slideBox" class="slideBox">
        <div class="scroller">
            <ul>
                <volist name="info['images']" id="img">
                    <li><img alt="" src="http://{:C('DOMAIN')}{$img.path}"/></li>
                </volist>
            </ul>
        </div>
        <div class="icons">
            <ul>
                <i class="current"></i>


                <i class="current"></i>

            </ul>
        </div>
    </div>
    <div class="blank2"></div>
</section>
<script type="text/javascript">
    TouchSlide({
        slideCell:"#slideBox",
        titCell:".icons ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
        mainCell:".scroller ul",
        effect:"leftLoop",
        autoPage:true,//自动分页
        autoPlay:false //自动播放
    });
    function showPic(){
        var data = document.getElementById("slideBox").className;
        var reCat = /ui-gallery/;
        //str1.indexOf(str2);
        if( reCat.test(data) ){
            document.getElementById("slideBox").className = 'slideBox';
        }else{
            document.getElementById("slideBox").className = 'slideBox ui-gallery';
            //document.getElementById("slideBox").style.position = 'fixed';
        }
    }
</script>

<section class="goodsInfo">
    <if condition="session('member.id') gt 0">
        <a class="collect" id="collect_box" href="javascript:collection({$info.id})" style="display: inline;"></a>
    </if>
    <div class="title">
        <h1> {$info.title} </h1>
    </div>
    <ul>
        <li>价格：<b class="price">￥<span id="price">{$info.price}</span></b></li>
    </ul>

    <ul>
        <li>月销量：{$info.sales}件</li>
        <li>总库存：{$info.stock}件</li>
    </ul>
</section>
<div class="wrap">
    <section class="goodsBuy radius5">
        <input id="goodsBuy-open" type="checkbox">
        <label class="info" for="goodsBuy-open">
            <div>请选择<span></span><i></i></div>
            <div class="selected"> </div>
        </label>
        <form action="" method="post" id="form" >
            <div class="fields" style="display:block;">
                <ul class="ul1">
                    <li>商品总价：￥<span id="total" class="price"></span></li>
                    <li></li>
                </ul>
                <ul class="ul2">
                    {:hook("goods_attribute",$info)}
                </ul>
                <ul class="ul2">
                    {:hook("goods_detail",$info)}
                </ul>
                <ul class="quantity">
                    <h2>数量：</h2>
                    <div class="items"> <span class="ui-number radius5">
                        <button type="button" class="decrease radius5" onclick="changenum(- 1)">-</button>
            <input class="num" name="number" id="goods_number" autocomplete="off" value="1" min="1" max="1" type="number" />
            <button type="button" class="increase radius5" onclick="changenum(1)">+</button>

            </span> </div>
                </ul>
            </div>
            <div class="option" >
                <script type="text/javascript">
                    function showDiv(){
                        document.getElementById('popDiv').style.display = 'block';
                        document.getElementById('hidDiv').style.display = 'block';
                        document.getElementById('cartNum').innerHTML = document.getElementById('goods_number').value;
                        document.getElementById('cartPrice').innerHTML = document.getElementById('ECS_GOODS_AMOUNT').innerHTML;
                    }
                    function closeDiv(){
                        document.getElementById('popDiv').style.display = 'none';
                        document.getElementById('hidDiv').style.display = 'none';
                    }
                </script>
                <button type="button" class="btn buy radius5 footer-btn" id="buy-now" data-url="{:U('Order/confirm/direct/yes')}" >立即购买</button>
                <button type="button" class="btn cart radius5 footer-btn" id="add-cart" data-url="{:U('Cart/update')}">
                    <div class="ico_01"></div>
                    加入购物车
                </button>
            </div>

            <input name="goods_id" type="hidden" value="{$info.id}">
            <input name="goods_title" type="hidden" value="{$info.title}">
            <input name="origin_price" type="hidden" value="{$info.price}">
            <input name="price" type="hidden" value="{$info.price}">
            <input name="activity" type="hidden" value="{$info.activity}">
        </form>
    </section>
    <!--<div class="guarantee">微信支付商家,正品保证,假一罚三,七天无条件退换货。</div>-->
</div>
<script type="text/javascript">
    //介绍 评价 咨询切换
    var tab_now = 1;
    function tab(id){
        document.getElementById('tabs' + tab_now).className = document.getElementById('tabs' + tab_now).className.replace('current', '');
        document.getElementById('tabs' + id).className = document.getElementById('tabs' + id).className.replace('', 'current');
        tab_now = id;
        if (id == 1) {
            document.getElementById('tab1').className = '';
            document.getElementById('tab2').className = 'hidden';
            document.getElementById('tab3').className = 'hidden';
        }else if (id == 2) {
            document.getElementById('tab1').className = 'hidden';
            document.getElementById('tab2').className = '';
            document.getElementById('tab3').className = 'hidden';
        }else if (id == 3) {
            document.getElementById('tab1').className = 'hidden';
            document.getElementById('tab2').className = 'hidden';
            document.getElementById('tab3').className = '';
        }
    }


    //够买、加入购物车

    $("#add-cart").on('click',function(){
        console.log('加入购物车');
        var url = $(this).data('url');
        submit(url);
    });
    $("#buy-now").on('click',function(){
        console.log('立即购买');
        var url = $(this).data('url');
        submit(url);
    });
    function submit(url){
        console.log(url);
        var form = $("#form");
        $(form).attr('action',url);



        $(form).submit();
    }
</script>
<section class="s-detail">
    <header>
        <ul style="position: static;" id="detail_nav">
            <li id="tabs1" onClick="tab(1)" class="current"> 详情 </li>
            <li id="tabs2" onClick="tab(2)" class=""> 属性 </li>
            <!--<li id="tabs2" onClick="tab(2)" class=""> 评价 <span class="review-count">(0)</span> </li>-->
            <!--<li id="tabs3" onClick="tab(3)" class=""> 热销 </li>-->
        </ul>
    </header>
    <div id="tab1" class="">
        <div class="desc wrap">
            <div class="blank2"></div>
            <style>
                .conte p{
                    line-height:30px;
                }
            </style>
            <div class="conte">
                {$info.content}
            </div>
        </div>
    </div>
    <div id="tab2" class="hidden">
        <div class="desc wrap">
            <div class="blank2"></div>
            <style>
                .attr table{
                    width: 100%;
                }
                    .attr table tbody tr td{
                        padding: 8px;
                        border-top: 1px solid #ddd;
                    }
                    .attr table tbody tr td:first-child{
                        width:30%;
                        border-right:1px solid #ddd;
                    }
                    .attr table tbody tr td:last-child{
                        width:80%;
                    }

            </style>
            <div class="attr">{$info.content_attribute}</div>
        </div>
    </div>
    <div id="tab3" class="hidden">
        <div class="wrap">
        </div>
    </div>
</section>

<include file="Public/bottom"/>

<script type="text/javascript">
//    var goods_id = {$info.id};
//    onload = function(){
//        changePrice();
//        fixpng();
//        try {onload_leftTime();}
//        catch (e) {}
//    }

    //点选可选属性或改变数量时修改商品价格的函数



    //加入收藏
    function collection(id){
        console.log("id=" +id);
        $.post(
            "{:U('Center/collection_ajax_add')}",
            "id="+id,
            function(res){
                console.log(res);
                alert(res.msg);
            }

        );
    }

    //修改商品数量
    function changenum(diff) {
        var num = parseInt(document.getElementById('goods_number').value);
        var goods_number = num + Number(diff);
        if( goods_number >= 1){
            document.getElementById('goods_number').value = goods_number;//更新数量
            changePrice();
        }
    }
    changePrice();
    //修改总价
    function changePrice()
    {
        var price = $("#price").text();
        var number = $("#goods_number").val();
        console.log("单价 "+price+" 数量 "+number);
        var total = price*number;
        console.log("总价 "+total);
        $("#total").text(total);
    //        var attr = getSelectedAttributes(document.forms['ECS_FORMBUY']);
    //        var qty = document.forms['ECS_FORMBUY'].elements['number'].value;
    }

</script>
</body>
</html>